<style>
	.selectedClass {
		font-weight: bold;
		font-size: 16px;
		color: #4992f1;
	}
</style>
<template>
	<div>
		<el-dialog :visible.sync="dialogTableVisible" :title="dataList.outletName" top="5%" height="70%" title="巡检记录" append-to-body>
			<div style="margin-bottom: 20px;" class="displayFlexBet">
				<div v-for="(item,index) in centerDateList" :key="index" class="point"
					:class="[params.recordDate.includes(item)?'selectedClass':'']" @click="changeDateClick(item)">
					{{item}}
				</div>
				<!-- <span class="demonstration">日期：</span>
				<el-date-picker v-model="params.recordDate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" size="mini"
					@change="getWaterInspectRecordByOutletIdAndDate" /> -->
			</div>

			<div v-if="dataList">
				<div v-if="dataList.defenceList && dataList.defenceList.length > 0"
					style="margin-bottom: 10px;border-bottom: 1px solid#f5f5f5;">
					<div style="font-size: 16px;margin-bottom: 10px;background:#F8F8F9;padding:4px 10px">生产设施</div>
					<div v-for="(item,index) in dataList.defenceList" :key="index" style="margin-bottom: 10px;">
						<div class="displayFlex mb10">
							<img v-if="item.result == 'NORMAL'" src="@/assets/sIcon97.png"
								style="width: 15px;height: 15px;margin-right: 10px;" />
							<img v-else src="@/assets/sIcon96.png"
								style="width: 15px;height: 15px;margin-right: 10px;" />

							<div style="font-size: 16px;">{{item.defenceName}}</div>
						</div>

						<div v-for="(item1,index1) in item.parameterList" :key="index1" class="mb10 ml25 displayFlex">
							<div v-if="item1.valueType=='STATE'" class="mr10">
								<img v-if="item1.result == 'NORMAL'" src="@/assets/sIcon30.png"
									style="width: 15px;height: 15px;" />
								<img v-else src="@/assets/sIcon44.png" style="width: 15px;height: 15px;" />
							</div>
							<div style="width: 100px;">{{item1.parameterName}}</div>
							<template v-if="item1.valueType=='NUMBER'">
								<div>{{item1.amount}}</div>
								<div>{{item1.unitCode}}</div>
							</template>

						</div>

						<div v-for="(item2,index2) in item.itemList" :key="index2" class="mb10 ml25">
							<div class="displayFlex mb10">

								<div class="displayFlex">
									<template v-if="item2.valueType=='STATE'">
										<img v-if="item2.result == 'NORMAL'" src="@/assets/sIcon97.png"
											style="width: 15px;height: 15px;margin-right: 10px;" />
										<img v-else src="@/assets/sIcon96.png"
											style="width: 15px;height: 15px;margin-right: 10px;" />
									</template>

									<div style="font-size: 16px;">{{item2.inspectItemName}}</div>
								</div>
								<template v-if="item2.valueType=='NUMBER'">
									<div>{{item2.amount}}</div>
									<div>{{item2.unitCode}}</div>
								</template>
							</div>
						</div>

						<div v-if="item.imgList && item.imgList.length > 0" style="padding-left:25px">
							<el-image v-for="(item2,index2) in item.imgList" :key="index2" :src="imgUrl+item2"
								style="width: 40px;height: 40px;border-radius: 8px;"
								:preview-src-list="[imgUrl+item2]" />
						</div>
					</div>
				</div>

				<div v-if="dataList.linkList && dataList.linkList.length > 0"
					style="margin-bottom: 10px;border-bottom: 1px solid#f5f5f5;">
					<div style="font-size: 16px;margin-bottom: 10px;background:#F8F8F9;padding:4px 10px">生产环节</div>
					<div v-for="(item,index) in dataList.linkList" :key="index" style="margin-bottom: 10px;">

						<div class="displayFlex mb10">
							<img v-if="item.result == 'NORMAL'" src="@/assets/sIcon97.png"
								style="width: 15px;height: 15px;margin-right: 10px;" />
							<img v-else src="@/assets/sIcon96.png"
								style="width: 15px;height: 15px;margin-right: 10px;" />

							<div style="font-size: 16px;">{{item.linkName}}</div>
						</div>

						<div v-for="(item1,index1) in item.pollutionList" :key="index1" class="mb10 ml25">
							<div class="displayFlex">
								<div style="width: 100px;">{{item1.pollutionName}}</div>
								<div>
									{{item1.amount}}{{item1.unitCode}}
								</div>
							</div>
						</div>


						<div v-for="(item2,index2) in item.itemList" :key="index2" class="mb10 ml25">
							<div class="displayFlex">
								<div class="displayFlex">
									<div v-if="item2.valueType=='STATE'" class="mr10">
										<img v-if="item2.result == 'NORMAL'" src="@/assets/sIcon30.png"
											style="width: 15px;height: 15px;" />
										<img v-else src="@/assets/sIcon44.png" style="width: 15px;height: 15px;" />
									</div>

									<div style="width: 100px;">{{item2.inspectItemName}}</div>
								</div>
								<div v-if="item2.valueType=='NUMBER'">
									{{item2.amount}}{{item2.unitCode}}
								</div>
							</div>
						</div>

						<div v-if="item.imgList && item.imgList.length > 0" style="padding-left:25px">
							<el-image v-for="(item2,index2) in item.imgList" :key="index2" :src="imgUrl+item2"
								style="width: 40px;height: 40px;border-radius: 8px;"
								:preview-src-list="[imgUrl+item2]" />
						</div>
					</div>
				</div>


				<div class="displayFlex mb10">
					<div style="width: 100px;">备注</div>
					<div style="width: 150px;">未填写</div>
				</div>
				<div class="displayFlex mb10">
					<div style="width: 100px;">巡检人</div>
					<div style="width: 150px;">
						{{dataList.actualExecuteName}}
					</div>
				</div>
				<div class="displayFlex mb10" v-if="dataList.recordDate">
					<div style="width: 100px;">巡检时间</div>
					<div style="width: 150px;">
						{{dataList.recordDate.split(" ")[0]}}
					</div>
				</div>
				<div class="displayFlex">
					<div style="width: 100px;">审核人</div>
					<div style="width: 150px;">
						{{dataList.approveUserName}}
					</div>
				</div>

			</div>

			<el-empty v-else description="暂无巡检记录"></el-empty>
		</el-dialog>
	</div>
</template>

<script>
	import moment from 'moment'
	let that
	export default {
		name: 'xunjianHis',
		props: ['outletId'],
		data() {
			return {
				dialogTableVisible: false,
				params: {
					outletId: '', // 排口id
					recordDate: moment().format('YYYY-MM-DD'), // 日期
				},
				dataList: '',
				imgUrl: "https://www.weifeibangbang.com/wfbb-webupload/service/sys/file/upload/view?appKey=5da5441f62e48aedc7a3853ffc75c2db&prodID=gf&fileID=",
				centerDateList: [],
			}
		},

		created: function() {},
		mounted: function() {
			that = this
			that.params.outletId = that.outletId

		},

		methods: {

			changeDateClick(item) {
				that.params.recordDate = that.params.year + "-" + item
				that.changeDate()
				that.getWaterInspectRecordByOutletIdAndDate()
			},

			open(outletId, recordDate) {
				const currentDate = new Date();

				that.dataList = ''
				that.params.outletId = outletId
				if (recordDate && recordDate.split("-").length == 3) {
					that.params.recordDate = recordDate
				} else {
					that.params.recordDate = recordDate + "-" + currentDate.getDate();
				}
				that.dialogTableVisible = true
				that.changeDate()
				that.getWaterInspectRecordByOutletIdAndDate()
			},

			changeDate() {
				that.params.year = that.params.recordDate.split("-")[0]
				that.params.month = that.params.recordDate.split("-")[1]
				let day = Number(that.params.recordDate.split("-")[2])
				let month = that.params.month
				let year = that.params.year

				let maxDay = new Date(that.params.year, that.params.month, 1).getDate()
				if (day == 1) {
					let day2 = (day + 1) < 10 ? '0' + (day + 1) : (day + 1)
					day = day < 10 ? '0' + day : day
					that.centerDateList = ['', month + '-' + day, month + '-' + day2]
				} else if (day == maxDay) {
					let day0 = (day - 1) < 10 ? '0' + (day - 1) : (day - 1)
					day = day < 10 ? '0' + day : day
					that.centerDateList = [month + '-' + day0, month + '-' + day, '']
				} else {
					let day0 = (day - 1) < 10 ? '0' + (day - 1) : (day - 1)
					let day2 = (day + 1) < 10 ? '0' + (day + 1) : (day + 1)
					day = day < 10 ? '0' + day : day
					that.centerDateList = [that.params.month + '-' + day0, that.params.month + '-' + day, that.params
						.month + '-' +
						day2
					]
				}
			},

			getWaterInspectRecordByOutletIdAndDate() {
				that.dataList = ''
				that.ajax({
					url: '/waterInspect/getLineByOutletIdAndDate',
					data: JSON.stringify(that.params),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.dataList = result.data
						}
					},
				}, "加载中...")
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>